<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="renderer" content="webkit">
    <!-- 公共css/js文件 -->
    <script type="text/javascript" src="/topjui/js/topjui.include.js"></script>
</head>

<body>

<!-- layout布局 开始 -->
<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'west',title:'树形导航',fit:false,split:true,border:false,width:'20%',iconCls:'icon-org',headerCls:'border_right',bodyCls:'border_right'">
        <table data-toggle="topjui-treegrid"
               data-options="id:'channelDg',
			   idField:'id',treeField:'text',
			   url:ctx + '/system/api/getChannelsById?id=1',
            expandUrl:ctx + '/system/api/getChannelsByPid?pid={id}',
            childGrid:{
            params:'id:id',
            grids:[
            {type:'datagrid',id:'articleDg'},
            ]
            }">
            <thead>
            <tr>
                <th data-options="field:'uuid',title:'UUID',checkbox:true"></th>
                <th data-options="field:'text',title:'栏目名称',width:100"></th>
            </tr>
            </thead>
        </table>
    </div>

    <div data-options="region:'east',iconCls:'icon-chart_pie',title:'',split:true,border:false,width:'40%',bodyCls:'border_left'">
        <div data-toggle="topjui-tabs" data-options="id:'eastTabs',fit:true,border:false,
				 tabs:[
				 	{type:'panel',id:'detail1Panel'},
				 	{type:'panel',id:'detail2Panel'}
				 ]">
            <div title="第一个tab页（动态加载内容）"
                 data-options="id:'detail1Panel',iconCls:'icon-table',
					 dynamicHref:ctx + '/system/api/articleDetail?uuid={uuid}',
							parentGrid:{
								type:'datagrid',
								id:'articleDg',
								params:'uuid'
							}"></div>
            <div title="第二个tab页（动态加载内容）"
                 data-options="id:'detail2Panel',iconCls:'icon-table',
					 dynamicHref:ctx + '/system/api/articlePrint?uuid={uuid}',
							parentGrid:{
								type:'datagrid',
								id:'articleDg',
								params:'uuid'
							}"></div>
        </div>
    </div>

    <div data-options="region:'center',iconCls:'icon-reload',title:'',fit:false,split:true,border:false,bodyCls:'border_left_right'">
        <!-- datagrid表格 -->
        <table data-toggle="topjui-datagrid"
               data-options="id:'articleDg',
               fitColumns:true,
               url:ctx+'/system/api/getArticlePageSet',
               childTab: {
                   tabs:[
                        {id:'eastTabs',params:'uuid'}
                   ]
               }">
            <thead>
            <tr>
                <th data-options="field:'uuid',title:'UUID',checkbox:true"></th>
                <th data-options="field:'title',title:'标题',width:100,sortable:true,formatter:openNewTab"></th>
                <th data-options="field:'createTime',title:'创建时间',sortable:true"></th>
            </tr>
            </thead>
        </table>
    </div>

</div>
<!-- layout布局 结束 -->

<script>
    function openNewWindow(value, row, index) {
        return '<a href=\"' + ctx + '/system/article/detail?uuid=' + row.uuid + '\" target=\"_blank\">' + value + '</a>'
    }
    function openNewTab(value, row, index) {
        return '<a href="javascript:window.parent.addParentTab({href:\'' + ctx + '/system/article/detail?uuid=' + row.uuid + '\',title:\'' + row.title + '\'})\">' + value + '</a>'
    }
</script>

<!-- 表格工具栏 -->
<div id="articleDg-toolbar"
     data-options="grid:{
        type:'datagrid',
        id:'articleDg'
     }" style="display:none">
    <a href="javascript:void(0)"
       data-toggle="topjui-menubutton"
       data-options="clickEvent:'openDialog',
       parentGrid:{
           type:'treegrid',
           id:'channelDg',
           params:'cid:id',
           unselectedMsg:'请先选择文章要发布的左侧树形导航中的栏目'
       },
       dialog:{
           id:'articleAddDialog',
           href:'/html/article/add.html',
           width:900,
	  	   height:500,
	  	   maximizable:false,
	  	   editor:[
			   {id:'contentAddEditor',field:'content'}
		   ],
           buttonsGroup:[
               {text:'保存',url:ctx + '/system/api/saveArticle',iconCls:'icon-add',handler:'ajaxForm'}
           ]
       }">新增</a>
    <a href="javascript:void(0)"
       data-toggle="topjui-menubutton"
       data-options="clickEvent:'openDialog',
       iconCls:'icon-edit',
       dialog:{
           id:'articleEditDialog',
           href:'/html/article/edit.html?uuid={uuid}',
           url:ctx+'/system/api/getArticleDetailByUuid?uuid={uuid}',
           width:900,
	  	   height:500,
	  	   maximizable:false,
	  	   editor:[
			   {id:'contentEditEditor',field:'content'}
		   ],
           buttonsGroup:[
               {text:'更新',url:ctx + '/system/api/updateArticle',iconCls:'icon-save',handler:'ajaxForm'}
           ]
       }">编辑</a>
    <a href="javascript:void(0)"
       data-toggle="topjui-menubutton"
       data-options="clickEvent:'delete'">删除</a>
    <a href="javascript:void(0)"
       data-toggle="topjui-menubutton"
       data-options="clickEvent:'filter'">过滤</a>
    <a href="javascript:void(0)"
       data-toggle="topjui-menubutton"
       data-options="clickEvent:'search'">查询</a>
    <a href="javascript:void(0)"
       data-toggle="topjui-menubutton"
       data-options="clickEvent:'export'">导出</a>
</div>

<script type="text/javascript" src="/topjui/plugins/ueditor/utf8-jsp/1.4.3.3/ueditor.config.js"></script>
<script type="text/javascript" src="/topjui/plugins/ueditor/utf8-jsp/1.4.3.3/ueditor.all.min.js"></script>

</body>
</html>